<template>
  <s-layout title="店铺设置" leftIcon="|">
    <view class="storeSetting-wrap" :style="`height: calc( 100vh - ${pageHeight}px)`">
      <view class="content">
        <view class="item" 
          v-for="item in state.settingsData" 
          :key="item.prop"
          :class="{ 'item-margin-top':  (item.prop == 'assets' || item.prop == 'category') }"
          @tap="handleItem(item)"
        >
          <view class="label">{{ item.label }}</view>
          <view class="value">
            <view class="val-text" v-if="item.type == 'text'">
              {{ item.value }} 
              <text class="copyable" v-if="item.copyable" @click="handleCopyable(item.value)">复制</text>
            </view>
            <view class="arrow" v-if="item.editable">
              <uni-icons class="ss-m-l-10" color="#ccc" type="right" size="14"></uni-icons>
            </view>
            <view v-if="item.prop == 'avatar'" class="avatar">
              <image :src="item.value" mode=""></image>
            </view>
          </view>
        </view>
      </view>
    </view>
    <!-- 修改头像选择 -->
    <su-popup :show="state.avatarShow" round="25" @close="closeAvatar">
      <view class="popupBox" @tap="onAvatarSubmit">
        <view class="popupBox-item" @tap="state.mode = 'camera'">拍照</view>
        <view class="popupBox-item" @tap="state.mode = 'album'">从手机相册选择</view>
      </view>
      <view class="popupBox-button" @tap="closeAvatar">
        取消
      </view>
    </su-popup>

  </s-layout>
</template>
<script setup>
import sheep from '@/sheep';
import { onLoad } from '@dcloudio/uni-app';
import { computed, reactive } from 'vue';
import { chooseFile } from '@/sheep/utils/index'
import { clone } from 'lodash';

const state = reactive({
  type: 1,
  avatarShow: false,
  mode: '', // camera=拍照 album=从手机相册选择
  settingsData: [
    { 
      label: '云店头像', 
      value: 'https://xyh-static-app.oss-cn-hangzhou.aliyuncs.com/storage/default/20250425/03485b1eb96a9753ec61d6fee1c6caa6.jpg', 
      type: 'image',
      prop: 'avatar',
      editable: true
    },
    { 
      label: '云店名称', 
      value: '我的云店铺', 
      type: 'text',
      prop: 'name',
      editable: true
    },
    { 
      label: '云店ID', 
      value: '23322232223', 
      type: 'text',
      prop: 'id',
      copyable: true
    },
    { 
      label: '云店类型', 
      value: '黄金店铺', 
      type: 'text',
      prop: 'type'
    },
    { 
      label: '云店等级', 
      value: 'LV.1', 
      type: 'text',
      prop: 'level'
    },
    { 
      label: '主体类型', 
      value: '个体工商户', 
      type: 'text',
      prop: 'subjectType'
    },
    { 
      label: '账户资产', 
      value: '￥8878.99', 
      type: 'text',
      prop: 'assets',
      editable: true
    },
    { 
      label: '类目偏好', 
      value: '全品类', 
      type: 'text',
      prop: 'category',
      editable: true
    }
  ]
});

const pageHeight = computed(() => {
  console.log(sheep.$platform.device.statusBarHeight, 'statusBarHeight')
  console.log(sheep.$platform.device.safeAreaInsets.bottom, 'safeAreaInsets')
  return sheep.$platform.device.statusBarHeight + sheep.$platform.device.safeAreaInsets.bottom + 44 + 32
})

console.log(sheep.$router.hasHistory(), 'hasHistory')

const closeAvatar = () => {
  state.avatarShow = false
}

const handleCopyable = val => {
  console.log(val)
  sheep.$helper.copyText(val);
}

const handleItem = item => {
  const { prop, value } = item
  if (prop == 'avatar') { // 头像
    console.log(22)
    state.avatarShow = true
  } else if (prop == 'name') { // 修改店铺名称
    console.log(value)
    sheep.$router.go('/pages/distribution/storeEditName', {
			name: value
		})
  } else if (prop == 'category') { // 全品类
    console.log(value)
    sheep.$router.go('/pages/distribution/categoryPreference', {
			name: value
		})
  } 
}

const getUserInfo = async () => {
  const data = await sheep.$store('user').getInfo();
  state.data = clone(data);
  console.log('state.data: 用户信息 ', state.data);
};

const onAvatarSubmit = async () => {
  closeAvatar()
  let res = await chooseFile('image', 1 , state.mode) // camera, album
  if (res) {
    const response = await sheep.$api.app.upload(res[0].url);
    if (response) {
      const { error, data } = await sheep.$api.user.update({
        avatar: response.path,
      });
      if (error === 0) {
        // getUserInfo();
      }
    }
  }
}

onLoad(() => {
  console.log('');
});

</script>
<style lang='scss' scoped>
@import './style//storeSetting.scss'
</style>